<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社区论坛 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4A6FFF;
      --primary-light: #E8F0FF;
      --success: #34C759;
      --warning: #FF9500;
      --danger: #FF3B30;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --gray-100: #F7F8FA;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.6;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-actions {
      display: flex;
      gap: 15px;
    }
    
    .header-btn {
      color: var(--text-primary);
      font-size: 20px;
      background: none;
      border: none;
      padding: 5px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .search-input {
      width: 100%;
      background-color: var(--gray-100);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      padding: 10px 15px 10px 40px;
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 28px;
      top: 23px;
      color: var(--text-secondary);
    }
    
    /* 分类导航 */
    .category-tabs {
      display: flex;
      overflow-x: auto;
      background-color: var(--bg-white);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-light);
      scrollbar-width: none;
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .category-tab {
      padding: 6px 14px;
      margin-right: 8px;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      background-color: var(--gray-100);
      color: var(--text-secondary);
      border: none;
    }
    
    .category-tab.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 列表样式切换 */
    .view-controls {
      display: flex;
      justify-content: flex-end;
      padding: 10px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .view-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 18px;
      margin-left: 15px;
      padding: 3px;
    }
    
    .view-btn.active {
      color: var(--primary);
    }
    
    /* 通用帖子样式 */
    .forum-section {
      margin-bottom: 15px;
    }
    
    .section-header {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .section-action {
      color: var(--primary);
      font-size: 14px;
    }
    
    .post-list {
      background-color: var(--bg-white);
    }
    
    .post-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--text-primary);
    }
    
    .post-item:last-child {
      border-bottom: none;
    }
    
    .post-item:hover {
      background-color: var(--gray-100);
    }
    
    /* 简洁列表样式 */
    .simple-list .post-item {
      justify-content: space-between;
    }
    
    .simple-list .post-content {
      flex: 1;
      padding-right: 10px;
      min-width: 0;
    }
    
    .simple-list .post-title {
      font-weight: 500;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .simple-list .post-meta {
      display: flex;
      font-size: 12px;
      color: var(--text-secondary);
      gap: 10px;
    }
    
    .simple-list .post-stats {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .simple-list .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 图文列表样式 */
    .image-list .post-item {
      gap: 12px;
    }
    
    .image-list .post-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .image-list .post-content {
      flex: 1;
      min-width: 0;
    }
    
    .image-list .post-title {
      font-weight: 500;
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .image-list .post-excerpt {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .image-list .post-meta {
      display: flex;
      font-size: 12px;
      color: var(--text-secondary);
      gap: 10px;
    }
    
    /* 带分类标签的列表样式 */
    .tagged-list .post-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 15px 16px;
    }
    
    .tagged-list .post-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    
    .post-tag {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    
    .tag-tech {
      background-color: #E6F7FF;
      color: #1890FF;
    }
    
    .tag-life {
      background-color: #FFF7E6;
      color: #FAAD14;
    }
    
    .tag-question {
      background-color: #F6FFED;
      color: #52C41A;
    }
    
    .tag-share {
      background-color: #FFEEF2;
      color: #F5222D;
    }
    
    .tagged-list .post-title {
      font-weight: 500;
      margin-bottom: 8px;
      font-size: 16px;
    }
    
    .tagged-list .post-footer {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .tagged-list .post-author {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    /* 带状态标识的列表样式 */
    .status-list .post-item {
      gap: 12px;
    }
    
    .status-list .post-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 6px;
    }
    
    .status-pinned {
      background-color: var(--danger);
    }
    
    .status-hot {
      background-color: var(--warning);
    }
    
    .status-normal {
      background-color: var(--border-light);
    }
    
    .status-list .post-content {
      flex: 1;
      min-width: 0;
    }
    
    .status-list .post-title {
      font-weight: 500;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .status-list .post-meta {
      display: flex;
      font-size: 12px;
      color: var(--text-secondary);
      gap: 10px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 浮动发布按钮 */
    .fab-button {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(74, 111, 255, 0.3);
      border: none;
      z-index: 90;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <div class="header-title">社区论坛</div>
    <div class="header-actions">
      <button class="header-btn">
        <i class="fa fa-bell-o"></i>
      </button>
      <button class="header-btn">
        <i class="fa fa-cog"></i>
      </button>
    </div>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar position-relative">
    <i class="fa fa-search search-icon"></i>
    <input type="text" class="search-input" placeholder="搜索帖子、话题或用户...">
  </div>
  
  <!-- 分类导航 -->
  <div class="category-tabs">
    <button class="category-tab active">全部</button>
    <button class="category-tab">热门讨论</button>
    <button class="category-tab">摄影技巧</button>
    <button class="category-tab">旅行攻略</button>
    <button class="category-tab">器材分享</button>
    <button class="category-tab">作品交流</button>
    <button class="category-tab">活动召集</button>
    <button class="category-tab">新手问答</button>
  </div>
  
  <!-- 列表样式切换 -->
  <div class="view-controls">
    <button class="view-btn active" id="listView">
      <i class="fa fa-list"></i>
    </button>
    <button class="view-btn" id="gridView">
      <i class="fa fa-th-large"></i>
    </button>
  </div>
  
  <!-- 简洁列表样式 -->
  <div class="forum-section">
    <div class="section-header">
      <div class="section-title">
        <i class="fa fa-fire" style="color: var(--warning);"></i>
        热门帖子
      </div>
      <a href="#" class="section-action">更多</a>
    </div>
    <div class="post-list simple-list">
      <a href="#" class="post-item">
        <div class="post-content">
          <div class="post-title">2023年最值得入手的微单相机推荐，附详细对比</div>
          <div class="post-meta">
            <span>摄影器材</span>
            <span>3小时前</span>
            <span>楼主：器材党</span>
          </div>
        </div>
        <div class="post-stats">
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>2.4k</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>86</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-heart-o"></i>
            <span>156</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-content">
          <div class="post-title">分享我的城市夜景拍摄心得，从参数到后期全解析</div>
          <div class="post-meta">
            <span>拍摄技巧</span>
            <span>昨天</span>
            <span>楼主：夜景控</span>
          </div>
        </div>
        <div class="post-stats">
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>1.8k</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>52</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-heart-o"></i>
            <span>124</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-content">
          <div class="post-title">云南大理5天4晚摄影之旅，这些机位不能错过</div>
          <div class="post-meta">
            <span>旅行摄影</span>
            <span>3天前</span>
            <span>楼主：旅行家</span>
          </div>
        </div>
        <div class="post-stats">
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>3.1k</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>128</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-heart-o"></i>
            <span>215</span>
          </div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- 图文列表样式 -->
  <div class="forum-section">
    <div class="section-header">
      <div class="section-title">
        <i class="fa fa-image" style="color: var(--primary);"></i>
        作品分享
      </div>
      <a href="#" class="section-action">更多</a>
    </div>
    <div class="post-list image-list">
      <a href="#" class="post-item">
        <img src="https://picsum.photos/200/200?random=30" alt="帖子图片" class="post-image">
        <div class="post-content">
          <div class="post-title">周末去郊外拍的一组花卉特写，尝试了不同的光圈效果</div>
          <div class="post-excerpt">主要用了百微镜头，f/2.8到f/8的光圈对比，浅景深果然更能突出主体...</div>
          <div class="post-meta">
            <span>花卉摄影</span>
            <span>2天前</span>
            <span>林小雨</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <img src="https://picsum.photos/200/200?random=31" alt="帖子图片" class="post-image">
        <div class="post-content">
          <div class="post-title">城市建筑摄影练习，寻找线条与光影的完美结合</div>
          <div class="post-excerpt">尝试了不同角度拍摄同一栋建筑，发现低角度更能体现建筑的宏伟...</div>
          <div class="post-meta">
            <span>建筑摄影</span>
            <span>4天前</span>
            <span>城市猎人</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <img src="https://picsum.photos/200/200?random=32" alt="帖子图片" class="post-image">
        <div class="post-content">
          <div class="post-title">第一次尝试星空摄影，虽然拍得不好但很有成就感</div>
          <div class="post-excerpt">在郊区等了三个小时，终于拍到了银河，后期还在学习中，求大神指点...</div>
          <div class="post-meta">
            <span>星空摄影</span>
            <span>1周前</span>
            <span>星空爱好者</span>
          </div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- 带分类标签的列表样式 -->
  <div class="forum-section">
    <div class="section-header">
      <div class="section-title">
        <i class="fa fa-tags" style="color: var(--success);"></i>
        分类讨论
      </div>
      <a href="#" class="section-action">更多</a>
    </div>
    <div class="post-list tagged-list">
      <a href="#" class="post-item">
        <div class="post-tags">
          <span class="post-tag tag-question">问答</span>
          <span class="post-tag tag-tech">器材</span>
        </div>
        <div class="post-title">预算5000元，是买全新入门微单还是二手中端机型？</div>
        <div class="post-footer">
          <div class="post-author">
            <img src="https://picsum.photos/100/100?random=50" alt="作者头像" class="author-avatar">
            <span>摄影新手</span>
            <span>2小时前</span>
          </div>
          <div>32条回复</div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-tags">
          <span class="post-tag tag-share">分享</span>
          <span class="post-tag tag-life">生活</span>
        </div>
        <div class="post-title">我的摄影包大公开，出门拍摄必带这些装备</div>
        <div class="post-footer">
          <div class="post-author">
            <img src="https://picsum.photos/100/100?random=51" alt="作者头像" class="author-avatar">
            <span>背包客</span>
            <span>昨天</span>
          </div>
          <div>48条回复</div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-tags">
          <span class="post-tag tag-tech">技巧</span>
          <span class="post-tag tag-share">分享</span>
        </div>
        <div class="post-title">教你用手机拍出专业级美食照片，只需3个小技巧</div>
        <div class="post-footer">
          <div class="post-author">
            <img src="https://picsum.photos/100/100?random=52" alt="作者头像" class="author-avatar">
            <span>美食摄影师</span>
            <span>3天前</span>
          </div>
          <div>76条回复</div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- 带状态标识的列表样式 -->
  <div class="forum-section">
    <div class="section-header">
      <div class="section-title">
        <i class="fa fa-flag" style="color: var(--danger);"></i>
        版主推荐
      </div>
      <a href="#" class="section-action">更多</a>
    </div>
    <div class="post-list status-list">
      <a href="#" class="post-item">
        <div class="post-status status-pinned"></div>
        <div class="post-content">
          <div class="post-title">【社区规范】发帖须知及违规处理办法，请新老用户务必阅读</div>
          <div class="post-meta">
            <span>社区公告</span>
            <span>版主：管理员</span>
            <span>2023-05-10</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-status status-hot"></div>
        <div class="post-content">
          <div class="post-title">【年度活动】社区摄影大赛开始报名，万元奖品等你拿</div>
          <div class="post-meta">
            <span>活动召集</span>
            <span>版主：活动君</span>
            <span>3天前</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-status status-hot"></div>
        <div class="post-content">
          <div class="post-title">【新手教程】从零开始学摄影，每周更新一篇基础教程</div>
          <div class="post-meta">
            <span>新手教学</span>
            <span>版主：摄影老师</span>
            <span>1周前</span>
          </div>
        </div>
      </a>
      
      <a href="#" class="post-item">
        <div class="post-status status-normal"></div>
        <div class="post-content">
          <div class="post-title">社区摄影器材团购活动，本月特惠机型清单</div>
          <div class="post-meta">
            <span>福利活动</span>
            <span>版主：福利君</span>
            <span>2周前</span>
          </div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- 浮动发布按钮 -->
  <button class="fab-button">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-comments nav-icon"></i>
      <span>论坛</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-envelope-o nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 分类标签切换
    document.querySelectorAll('.category-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.category-tab').forEach(t => {
          t.classList.remove('active');
        });
        this.classList.add('active');
        // 这里可以添加切换分类的逻辑
      });
    });
    
    // 视图切换
    const listViewBtn = document.getElementById('listView');
    const gridViewBtn = document.getElementById('gridView');
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      gridViewBtn.classList.remove('active');
      // 切换到列表视图的逻辑
    });
    
    gridViewBtn.addEventListener('click', function() {
      gridViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      // 切换到网格视图的逻辑
    });
    
    // 发布按钮
    document.querySelector('.fab-button').addEventListener('click', function() {
      alert('打开发布帖子选项');
    });
    
    // 底部导航交互
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 通知按钮
    document.querySelector('.header-btn .fa-bell-o').parentElement.addEventListener('click', function() {
      alert('查看通知');
    });
    
    // 设置按钮
    document.querySelector('.header-btn .fa-cog').parentElement.addEventListener('click', function() {
      alert('论坛设置');
    });
  </script>
</body>
</html>
